<template>
  <div class="version-manage-container">
    <el-card>
      <template #header>
        <ContainerHeader :headerList="headerList" @handleCurrentChange="handleCurrentChange" />
      </template>
      <keep-alive :include="includeKeys">
        <component 
          :is="activeComponent.type" 
          :key="activeComponent.key"
          :upgradeType="upgradeType"
        />
      </keep-alive>
    </el-card>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  name: 'VersionManage',
})
</script>
<script setup  lang="ts">
import VersionInfo from './components/VersionInfo.vue'
import ApManage from './components/ApManage.vue'
import CpManage from './components/CpManage.vue'
import DeviceAuthorize from './components/DeviceAuthorize.vue'
import { v4 as uuidv4 } from 'uuid'
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
let oneResourcesId:any = ref(uuidv4())
let twoResourcesId:any = ref(uuidv4())
let threeResourcesId:any = ref(uuidv4())
let deviceAuthorizeId:any = ref(uuidv4())
const upgradeType = ref("all")
const headerList = computed(()=>[
{
    name: t('deviceManage.firmware_upgrade_manage_label'),
    isHover: false,
    key: oneResourcesId.value,
    type:"all"
  },
{
    name: t('deviceManage.ap_firmware_manage_label'),
    isHover: false,
    key: twoResourcesId.value,
    type:"ap"
  },
  {
    name: t('deviceManage.cp_firmware_manage_label'),
    isHover: false,
    key: threeResourcesId.value,
    type:"cp"
  },
 {
   name: t('deviceManage.device_manage_authorization_label'),
   isHover: false,
   key: deviceAuthorizeId.value,
   type:"device_manage_authorization"
 }
 
])

const components:any = [
  { type: formatComponentInstance(VersionInfo,oneResourcesId.value), key: oneResourcesId.value },
  { type: formatComponentInstance(ApManage,twoResourcesId.value), key: twoResourcesId.value},
  { type: formatComponentInstance(CpManage,threeResourcesId.value), key: threeResourcesId.value},
  { type: formatComponentInstance(DeviceAuthorize,deviceAuthorizeId.value), key: deviceAuthorizeId.value},
]
const activeComponent:any= ref(components[0])
const includeKeys = computed(()=>{
    return [oneResourcesId.value,twoResourcesId.value,threeResourcesId.value]
})
const handleCurrentChange = (item:any) => {
      const existingComponent = components.find((i:any)=>i.key ==item.key)
      activeComponent.value = existingComponent
      upgradeType.value = item.type
}

function formatComponentInstance (component: any, componentId: string) {
  return markRaw({  
    name: componentId,
    render: () => h(component)
  })
}
</script>

<style lang="scss" scoped>
@import '@/styles/card.scss';

.version-manage-container {
  padding: 20px;
}
</style>
